<template>
    <div class="menu-page">
        <div class="top-group">
            <div class="top-select" @click="showArea = true">
                {{ curArea.title }}
                <van-icon name="arrow-down" />
            </div>
            <div class="top-select" @click="showHospital = true">
                {{ curHospital.title }}
                <van-icon name="arrow-down" />
            </div>
            <div class="top-select" @click="show = true">
                {{ month }}月
                <van-icon name="arrow-down" />
            </div>
        </div>
        <div class="table-top">
            <div>客户名称</div>
            <div>月份</div>
            <div>基础营业额</div>
            <div>增值营业额</div>
        </div>
        <div class="table-wrapper">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                <div class="table-row" v-for="item in list" :key="item.id">
                    <div>{{ item.hospital.title }}</div>
                    <div>{{ item.month }}月</div>
                    <div>￥{{ item.cost_price }}</div>
                    <div>￥{{ item.sell_price - item.cost_price }}</div>
                </div>
            </van-list>
        </div>
        <van-popup v-model="showArea" position="bottom">
            <van-picker title="选择区域" show-toolbar :columns="areaList" @confirm="onConfirmArea" @cancel="showArea = false">
                <template #option="option">
                    {{ option.title }}
                </template>
            </van-picker>
        </van-popup>
        <van-popup v-model="showHospital" position="bottom">
            <van-search v-model="hospitalSearch" placeholder="请输入搜索关键词" />
            <van-picker title="选择客户" show-toolbar :columns="getHospitalList" @confirm="onConfirmHospita"
                @cancel="showHospital = false">
                <template #option="option">
                    {{ option.title }}
                </template>
            </van-picker>
        </van-popup>
        <van-popup v-model="show" position="bottom">
            <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate"
                :max-date="maxDate" @cancel="show = false" @confirm="confirmTime" />
        </van-popup>
    </div>
</template>
<script>
export default {
    name: 'MenuPage',
    data() {
        return {
            order_field: 'refund',
            order_direction: 'desc',
            page: 0,
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            currentDate: new Date(),
            maxDate: new Date(),
            minDate: new Date(2020, 0, 1),
            show: false,
            loading: true,
            finished: false,
            list: [],
            showArea: false,
            area_id: '',
            curArea: {
                id: "",
                title: '全部区域'
            },
            areaList: [{
                id: "",
                title: '全部区域'
            }],
            showHospital: false,
            hospitalSearch:'',
            hospital_id: '',
            curHospital: {
                id: "",
                title: '所有客户'
            },
            hospitalList: [{
                id: "",
                title: '所有客户'
            }],
        }
    },
    mounted() {
        this.getArea()
        this.getHospitals()
        this.onLoad()
    },
    computed:{
        getHospitalList(){
            if(this.hospitalSearch.length === 0){
                return this.hospitalList
            }else{
                return this.hospitalList.filter(item=>item.title.indexOf(this.hospitalSearch)>-1)
            }
            
        }
    },
    methods: {
        onLoad() {
            this.page = 0
            this.list = []
            this.loading = true
            this.finished = false
            this.getList()
        },
        confirmTime(val) {
            this.show = false
            this.year = new Date(val).getFullYear()
            this.month = new Date(val).getMonth() + 1
            this.onLoad()
        },
        setDirection() {
            if (this.order_direction == 'desc') {
                this.order_direction = 'asc'
            } else {
                this.order_direction = 'desc'
            }
            this.onLoad()
        },
        getList() {
            if (this.finished) {
                return
            }
            this.loading = true
            this.$api.yy_lists({
                year: this.year,
                month: this.month,
                page: ++this.page,
                area_id: this.area_id,
                hospital_id: this.hospital_id
            }).then(res => {
                this.loading = false
                this.list.push(...res.data.data)
                if (res.data.data.length < 10) {
                    this.finished = true
                }
            })
        },
        onConfirmArea(val) {
            this.showArea = false
            this.curArea = val
            this.area_id = val.id
            this.hospital_id = ''
            this.curHospital = {
                id: "",
                title: '所有客户'
            }
            this.hospitalList = [{
                id: "",
                title: '所有客户'
            }]
            this.getHospitals()
            this.onLoad()
        },
        onConfirmHospita(val) {
            this.showHospital = false
            this.curHospital = val
            this.hospital_id = val.id
            this.onLoad()
        },
        getArea() {
            this.$api.user_area().then(res => {
                if (res.code == 1) {
                    this.areaList.push(...res.data)
                }
            })
        },
        getHospitals() {
            this.$api.area_hospitals({
                area_id: this.area_id
            }).then(res => {
                if (res.code == 1) {
                    this.hospitalList.push(...res.data)
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
.menu-page {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background-color: #fff;


    .top-group {
        padding: 0 .4rem;
        background-color: #50b1c1;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;
        color: #fff;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1;

        .top-select {
            display: flex;
            align-items: center;

            .van-icon {
                margin-left: 2px;
                font-size: 14px;
            }
        }
    }

    .table-top {
        padding: 0 .4rem;
        background-color: #f6f6f6;
        height: 50px;
        display: flex;
        // justify-content: space-around;
        align-items: center;
        font-size: 14px;
        color: #000;
        position: sticky;
        top: 50px;
        width: 100%;
        z-index: 1;
        border-bottom: 1px solid #e0e0e0;

        div {
            display: flex;
            align-items: center;

            &:nth-child(1) {
                width: 3.07rem;
            }

            &:nth-child(2) {
                width: 1.32rem;
            }

            &:nth-child(3) {
                width: 2.8rem;
                justify-content: center;
            }

            &:nth-child(4) {
                flex: 1;
            }

            .icon {
                width: .35rem;
                margin-left: 6px;
            }
        }
    }

    .table-wrapper {
        .table-row {
            margin: 0 .4rem;
            min-height: 50px;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #000;
            position: sticky;
            top: 50px;
            width: calc(100% - .8rem);
            border-bottom: 1px solid #e0e0e0;

            div {
                word-break: break-all;

                &:nth-child(1) {
                    width: 3.07rem;
                    padding-right: .13rem;
                }

                &:nth-child(2) {
                    width: 1.32rem;
                    padding-right: .13rem;
                }

                &:nth-child(3) {
                    width: 2.8rem;
                    padding-right: .13rem;
                    text-align: center;
                }

                &:nth-child(4) {
                    flex: 1;
                }
            }
        }

        .table-row-tool {
            padding: 0 .4rem;
            min-height: 50px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            border-top: 1px solid #e0e0e0;
            z-index: 1;
        }
    }
}
</style>